<template>
  <!-- 输入 组件 -->
  <section class="inputEvent">
    <div class="inputEventCont">
      <input type="text" v-model="content" placeholder="create your todo"> 
      <button class="plusBtn" @click="createEvent()">
        <span class="plusSign"></span>
      </button>
    </div>

    <DatePick />
  </section>
</template>
<script setup>
  import DatePick from '@/components/DatePick.vue'
  import {addEvent} from '@/utils/dataBaseTool.js'
  import { ref,onBeforeMount,onMounted,getCurrentInstance } from 'vue';
  

  let {proxy} = getCurrentInstance()

  let emit = defineEmits(['upudateOrginEventData'])
  let content = ref()

  // 测试 全局属性
  onBeforeMount(()=>{
    console.log(proxy.$dayjs())
  })

  function createEvent(){
    if(!content.value) {
      alert('勿输入空值，www.hotgirl.com')
      return 
    }
    addEvent(content.value)
    // 清除输入历史
    // content.value = ''
    //新增后更新
    emit('upudateOrginEventData')
  }


  function handleConfirm(value){
    console.log('hi')
  }

</script>

<style scoped>
  .inputEvent{
    padding: .25rem 0 ;
    flex: 1;
  }
  .inputEventCont{
    position: relative;
    /*不起作用*/
    /*box-shadow:
      1px 3px 10px 10px rgba(0, 0, 0, 0.7),
    ;*/
  }
  input{
    display: block;
    outline: none;
    box-sizing: border-box;
    border: 1px solid #999;
    border-radius: .35rem;

    font-size: .20rem;
    padding: .1rem .8rem 0.1rem 0.15rem;
    width: 100%;
  }  
  .plusBtn{
    position: absolute;
    top: 0;
    right: 0;

    width: .8rem;
    height: 100%;
    border-radius: .35rem;
    border: none;
    outline: none;
    background: linear-gradient(#c0a5f3,#7f95f7);
    font-size: .35rem;
  }
  .plusBtn:active{
    background: linear-gradient(#7f95f7,#c0a5f3);
  }
  .plusSign{
    display: inline-block;
    width: 100%;
    height: 100%;
    background: linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);
    background-size: 40% 3px,3px 40%;
    background-position: center;
    background-repeat: no-repeat;

  }
</style>
